<template>
  <div id="category">
    <!-- 搜索框的占位 -->
    <div class="category-search"></div>
    <!-- 分类 -->
    <div class="category-content">
      <div class="category-left">
        <!-- 一级分类 -->
        <ul class="category-list">
          <!-- 循环渲染分类列表 -->
          <li
            v-for="item in categoryList"
            :key="item.id"
            :class="{ active: selectedCategory === item.id }"
            class="category-item"
            @click="selectCategory(item.id)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="category-right">
        <!-- 二级分类 -->
        <div class="category-package">
          <div
            class="category-navigation"
            v-for="(category, index) in categoryList"
            :key="category.id"
          >
            <router-link to="/home" class="category-a">
              <p class="category-p" :class="{ active: index === 0 }">
                {{ category.title }}
              </p>
              <p class="category-icon">
                <el-icon color="#409EFC" :color="color">
                  <ArrowRight />
                </el-icon>
              </p>
            </router-link>
            <div class="category-title">
              <a>
                <span
                  v-for="(c2, index) in category.subCategories[0]
                    ?.metadataValues"
                  :key="index"
                  class="metadata-item"
                  :class="{ 'active-category': selectedCategory === c2.id }"
                >
                  {{ c2.displayName }}
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入vue响应式和声明onMounted生命周期
import { ref, onMounted } from 'vue'
// 导入接口
import { getCategoryList } from '@/api/category'
// 导入路由
import { useRouter } from 'vue-router'
// 导入图标
import { ArrowRight } from '@element-plus/icons-vue'
// 跟踪当前选择的分类
const selectedCategory = ref(-1)
// 点击分类项的更新
const selectCategory = (index: number | string) => {
  selectedCategory.value = index
}
// 在onMounted生命周期中调用该函数
onMounted(() => {
  getCategoryData()
})

/* 封装一个获取分类列表的函数 */
// 创建存储到数据库中的分类列表的响应式数据
// 存储一级菜单得数据
const categoryList = ref([])
// 存储二级菜单得数据
const categoryList2 = ref([])
// 发送请求功能函数
const getCategoryData = async () => {
  try {
    // 发送请求 获取数据
    let result = await getCategoryList()
    // 请求成功后 将数据存储到响应式数据中    一级的分类
    categoryList.value = result.data
  } catch (error) {
    console.log(error)
  }
}
</script>

<style lang="less" scoped>
@body-color: #595c63;
@primary-color: #409efc;
@light-gray: #f6f6f6;
@medium-gray: #e3e4e7;
@white: #fff;
@accent-color: #2d423e;

body {
  height: 100%;
}

#category {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.category-content {
  flex: 1;
  display: flex;
}

.category-left {
  overflow: hidden;
  width: 120px;
  flex: none;
  background-color: @light-gray;
  list-style: none;
}

.category-list {
  margin: 0;
  padding: 0;
}

.category-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  font-size: 16px;
  color: @body-color;
  line-height: 40px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 42px;
    bottom: 0;
    width: 96px;
    border-top: 1px solid @medium-gray;
  }
  .category-item.active {
    background-color: @white; /* 高亮时的背景颜色 */
    font-weight: bold; /* 高亮时的文本样式 */
  }
  .active-category {
    /* 这里可以设置导航区域被选中时的样式，比如背景颜色或者文本颜色等 */
    background-color: #ccc; /* 设置高亮的背景颜色示例 */
  }

  &.active {
    background-color: @white;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 8px;
      height: 100%;
      background-color: @accent-color;
    }
  }
}

.category-right {
  flex: 1;
  background-color: @white;
}

.category-package {
  height: 100%;
  margin: 0 30px 20px;
  border-radius: 4px;
  overflow: hidden;
}

.category-navigation {
  font-size: 14px;
}
.category-a {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.category-p {
  height: 50px;
  line-height: 50px;
}
.category-icon {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.category-title {
  font-size: 12px;
  margin: 10px 0px;
  padding: 10px;
  margin-top: 10px;
  border-top: 1px solid @medium-gray;
}
.metadata-item {
  /* 样式元素之间的间距和样式 */
  padding: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  display: inline-block;
  background-color: @light-gray; /* 元素的背景颜色 */
  border-radius: 4px; /* 元素的边框 */
}
</style>
